<template>
  <div class="control_left">
    <!-- <el-tabs v-model="activeName" type="card" :stretch="true">
      <el-tab-pane label="实时任务" name="0"> </el-tab-pane>
      <el-tab-pane label="添加订单" name="1"> </el-tab-pane>
    </el-tabs> -->
    <div class="tabbox" v-if="activeName == 0">
      <el-tabs v-model="iden" type="card" @tab-click="tab_click" :stretch="true">
        <el-tab-pane :label="item.title" :name="item.iden" v-for="(item, i) in typeOption" :key="i"></el-tab-pane>
      </el-tabs>
      <div class="tab_order">
        <div class="order_item" v-for="(item, i) in orderlist.data" :key="i">
          <div class="order_item_left">
            {{ item.status == "已支付" ? "待接单" : item.status == "已发货" ? "配送中" : item.status || "" }}
          </div>
          <div class="order_item_middle">
            <div>
              <span style="background-color: #13ce66">店</span>
              <div>
                <p>{{ item.rider_extract_ar.title }}</p>
                <p>{{ item.rider_extract_ar.town }} {{ item.rider_extract_ar.add }}</p>
                <p>{{ item.rider_extract_ar.tel }}</p>
              </div>
            </div>
            <div>
              <span style="background-color: #ed4014">收</span>
              <div>
                <p>{{ item.mail_area || "" }}{{ item.mail_town || "" }}{{ item.mail_address || "" }}</p>
                <p>{{ item.mail_name || "" }} {{ item.mail_tel || "" }}</p>
              </div>
            </div>
            <div v-if="item.rider_uid && item.rider_uid != 0">
              <span style="background-color: #e8ad66">骑</span>
              <div>
                <p>{{ item.rider_uid_nick }}</p>
                <p>{{ item.rider_uid_tel || "" }}</p>
              </div>
            </div>
          </div>
          <div class="order_item_right">
            <el-button :loading="$store.state.isLoading" size="mini" @click="goto_detail(item.id)" type="primary">详情</el-button>
            <!-- <el-button v-if="item.is_pay == 0" :loading="$store.state.isLoading" size="mini" @click="comfirmPay(item.id)" type="primary">确认支付</el-button> -->
            <el-button v-if="item.status == '已支付'" :loading="$store.state.isLoading" size="mini" @click="openSelectRider(item)" type="primary">派单</el-button>
          </div>
        </div>
        <div class="order_no">暂无更多订单</div>
      </div>
      <div class="tab_page">
        <el-pagination :current-page="currentPage" background layout="prev, pager, next" :total="orderlist.all_num" @current-change="currentPage_change"> </el-pagination>
      </div>
    </div>
    <div class="tabform" v-else>
      <el-form :model="edit_form" ref="form" label-width="80px">
        <el-form-item label="用户：" prop="uid">
          <el-col :span="14">
            <el-input placeholder="请选择用户" v-model="edit_form.username" :disabled="true" clearable></el-input>
          </el-col>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xz_user')">选择用户</el-button>
        </el-form-item>
        <el-form-item label="时间：" prop="uid">
          <el-col :span="14">
            <el-date-picker v-model="appointment_time" type="datetime" value-format="timestamp" placeholder="选择时间"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="出发地：" prop="uid">
          <el-col :span="14">
            <el-input placeholder="请选择出发地" v-model="edit_form.open_address" :disabled="true" clearable></el-input>
          </el-col>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzaddress('start')">选择起点</el-button>
        </el-form-item>
        <el-form-item label="目的地：" prop="uid">
          <el-col :span="14">
            <el-input placeholder="请选择目的地" v-model="edit_form.end_address" :disabled="true" clearable></el-input>
          </el-col>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzaddress('end')">选择终点</el-button>
        </el-form-item>

        <el-form-item class="tc">
          <el-button :loading="$store.state.isLoading" type="primary" @click="addbtn(edit_form)">编 辑</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog :close-on-click-modal="false" title="选取地址" class="tl size_13" width="800px" :visible.sync="dialogAddressVisible" style="margin-top: 0vh">
      <iframe
        class="map-item"
        id="getAddress"
        @load="loadiframe"
        src="https://m.amap.com/picker/?key=9ea145d7d33cad98b37ddb1eb43dcb2d"
        style="width: 100% !important; height: 600px !important"
      ></iframe>
    </el-dialog>
    <component :is="current" :show="shows" :extract_id="edit_form.rider_extract_id" :isAll="false" showType="list" @sendShop="getSend" @isshow="getShow"></component>
  </div>
</template>
<script>
import xz_user from "@/components/currency/xz_user.vue";
import xz_riderwork from "@/components/currency/xz_riderwork.vue";
import { Loading } from "element-ui";
export default {
  name: "control_left",
  data() {
    return {
      currentPage: 1,
      btn_str: "",
      orderlist: {
        data: [],
      },
      appointment_time: "",
      nowtype: "start",
      dialogAddressVisible: false,

      edit_form: {},
      current: "",
      shows: false,
      iden: "",
      activeName: 0,
      flag: false,
      typeOption: [
        { iden: "", title: "全部" },
        { iden: "已支付", title: "待接单" }, //（用户已支付骑手未接单）
        { iden: "已发货", title: "配送中" }, //（用户已支付骑手已接单配送中）
        { iden: "已完成", title: "已完成" }, //（用户已支付骑手已送达）
      ],
    };
  },
  components: {
    xz_user,
    xz_riderwork,
  },
  watch: {
    activeName(to, from) {
      if (to == 0) {
        this.get_order();
      } else {
        this.edit_form = {};
        this.appointment_time = "";
        this.nowtype = "start";
      }
    },
  },
  created() {
    this.get_order();
  },
  methods: {
    goto_detail(id) {
      let routeData = this.$router.resolve({
        path: "/index/order/addorder",
        query: { id: id },
      });
      window.open(routeData.href, "_blank");
    },
    tab_click(val) {
      console.log(11111);
      this.currentPage = 1;
      this.get_order();
    },
    currentPage_change(val) {
      this.currentPage = val;
      this.get_order();
    },
    toObj(obj, str) {
      obj = obj || {};
      obj.commandStr = str;
      return JSON.parse(JSON.stringify(obj));
    },
    handleCommand(obj) {
      var str = obj.commandStr;
      this.btn_str = str;
      switch (str) {
        case "取消订单":
          this.cancelOrder(obj.id);
          break;
        case "确认支付":
          this.comfirmPay(obj.id);
          break;
        case "修改司机":
          this.edit_form.id = obj.id;
          this.current = "xz_riderwork";
          this.shows = true;
          break;
        case "指定派单":
          this.edit_form.id = obj.id;
          this.current = "xz_riderwork";
          this.shows = true;
          break;
        default:
          break;
      }
    },
    openSelectRider(obj) {
      this.edit_form.id = obj.id;
      this.edit_form.rider_extract_id = obj.rider_extract_id;
      this.current = "xz_riderwork";
      this.shows = true;
    },
    editdriver(id) {
      var params = this.edit_form;
      this.$confirm("是否确认修改司机?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.getDriver.edit_orderdriver(params).then((res) => {
            if (res.data.code === 200) {
              this.get_order();
              this.$message({
                type: "success",
                message: res.data.result,
              });
            } else {
              this.$message({
                type: "info",
                message: res.data.result,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    distribute() {
      var params = this.edit_form;
      this.$confirm("是否确认指派订单?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.getDriver.distribute_driving_order(params).then((res) => {
            if (res.data.code === 200) {
              this.get_order();
              this.$message({
                type: "success",
                message: res.data.result,
              });
            } else {
              this.$message({
                type: "info",
                message: res.data.result,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    cancelOrder(id) {
      this.$confirm("是否确认取消订单?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.getDriver.cancel_order({ id }).then((res) => {
            if (res.data.code === 200) {
              this.get_order();
              this.$message({
                type: "success",
                message: res.data.result,
              });
            } else {
              this.$message({
                type: "info",
                message: res.data.result,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    comfirmPay(id) {
      this.$confirm("是否确认已经支付?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.getDriver.confirm_orderpay({ id }).then((res) => {
            if (res.data.code === 200) {
              this.get_order();
              this.$message({
                type: "success",
                message: "确认成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: res.data.result,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    loadiframe() {
      let iframe = document.getElementById("getAddress").contentWindow;
      iframe.postMessage("hello", "https://m.amap.com/picker/");
      window.parent.addEventListener(
        "message",
        (e) => {
          var obj = e.data;
          var point = obj.location.split(",");
          if (this.nowtype == "start") {
            this.edit_form.open_address = obj.name;
            this.edit_form.open_longitude = point[0];
            this.edit_form.open_latitude = point[1];
          } else {
            this.edit_form.end_address = obj.name;
            this.edit_form.end_longitude = point[0];
            this.edit_form.end_latitude = point[1];
          }

          this.dialogAddressVisible = false;
        },
        false
      );
    },
    xzaddress(type) {
      this.nowtype = type;
      this.dialogAddressVisible = true;
    },
    addbtn(item) {
      if (this.appointment_time) {
        item.appointment_time = this.$fnc.phptime(this.appointment_time);
      }
      var params = item || {};
      this.$api.getDriver.add_driving_order(params).then((res) => {
        if (res.data.code == 200) {
          this.dialogFormVisible = false;
          this.dialogcheckVisible = false;
          this.activeName = 0;
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    xzshop(val) {
      this.current = val;
      this.shows = true;
    },
    getShow(val) {
      this.shows = val;
    },
    getSend(row) {
      if (this.current == "xz_user") {
        this.edit_form.username = row.username;
        this.edit_form.uid = row.uid;
      } else if (this.current == "xz_riderwork") {
        let params = {
          id: this.edit_form.id,
          rider_uid: row.id,
        };
        this.$api.getRider.selectOrderRider(params).then((res) => {
          if (res.data.code === 200) {
            this.get_order();
            this.$message({
              type: "success",
              message: res.data.result,
            });
          } else {
            this.$message({
              type: "info",
              message: res.data.result,
            });
          }
        });
      }
    },
    get_order() {
      let loadingInstance = Loading.service({ fullscreen: true, title: "加载中" });
      var params = {};
      params.types = 40;
      console.log(this.iden);
      if (this.iden) {
        params.status = this.iden;
      }

      params.page = this.currentPage;
      if (this.$route.query.id) {
        params.rider_extract_id = this.$route.query.id;
      } else {
        params.rider_extract_id = 0;
      }
      this.$api.getUser.getOrderList(params).then((res) => {
        setTimeout(() => {
          loadingInstance.close();
        }, 500);
        if (res.data.code == 200) {
          this.orderlist = res.data.result;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.control_left {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;

  > div {
    width: 100%;
  }
  .tabbox {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    > div {
      width: 100%;
    }
    .tab_order {
      flex: 1;
      overflow: auto;
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      background-color: #f5f7f9;
      padding: 10px;
      .order_no {
        width: 100%;
        padding: 30px 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .order_item {
        width: 100%;
        // height: 120px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        border-left: 5px solid #13ce66;
        background-color: #fff;
        font-size: 14px;
        margin-bottom: 10px;
        .order_item_left {
          width: 24px;
          height: 100%;
          background-color: #2d8cf0;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          color: #fff;
          display: flex;
          align-items: center;
          margin-right: 10px;
        }
        .order_item_middle {
          flex: 1;
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: flex-start;
          align-items: center;
          > div {
            width: 100%;
            flex: 1;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f2f2f2;

            > span {
              border-radius: 50%;
              width: 30px;
              height: 30px;
              background-color: red;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              margin-right: 5px;
            }
            > div {
              flex: 1;
              display: flex;
              flex-flow: column;
              justify-content: flex-start;
              align-items: flex-start;
              p {
                width: 170px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: left;
              }
            }
          }
        }
        .order_item_right {
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          margin-right: 10px;
          button {
            margin: 5px 0;
          }
        }
      }
    }
    .tab_page {
      padding: 10px 0;
    }
  }
  .tabform {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    padding-top: 20px;
  }
}

.el-dialog {
}
</style>
